<template>
	<view class="content">
		<view class="imagebox" @click="gobaock">
			<image :src="proxy.serverimageUrl + 'back-black.png'" mode=""></image>
			<view class="title">
				意见反馈
			</view>
		</view>
		<view class="contentbox">
			<p class="title">请选择意见类型</p>
			<view class="btnbox">
				<view @click="itemactive(item,index)" :class="[btnactive == index ? 'btnitemactive' : '']" class="btnitem" v-for="(item,index) in btnboxlist" :key="index">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="kong-line">
			
		</view>
		<view class="feedtext">
			<p class="describe">意见描述</p>
			<up-textarea v-model="value1" placeholder="请输入内容" count maxlength="300"></up-textarea>
		</view>
		<view class="" style="margin-top: 50rpx;">
			<up-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
				:maxCount="1"></up-upload>
		</view>
		<view class="btnboxs">
			<up-button text="提交" @click="submit" color="#2854B7"></up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		opinionrelease
	} from '../../utils/api.js'
	import {
		defineProps,
		getCurrentInstance,
		ref
	} from 'vue'
	import BASE_URL from '@/utils/env.js'
	import {
		onLoad,
		onReady,
		onShow
	} from '@dcloudio/uni-app';
// import { log } from 'util';
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	const value1 = ref('')
	const btnactive = ref(0)
	const opinionType = ref('组织建设')
	const commonFileRequests = ref([])
	const btnboxlist = ref([{
			title: '组织建设',
			id: 1
		},
		{
			title: '优化建议',
			id: 2
		},
		{
			title: '活动问题',
			id: 3
		},
		{
			title: '其他意见',
			id: 4
		},
	])
	const itemactive = (item,index) =>{
		btnactive.value = index
		opinionType.value = item.title
	}
	const submit = () =>{
		let params = {
			commonFileRequests:commonFileRequests.value,
			mid:uni.getStorageSync('mid'),
			opinionContent:value1.value,
			opinionType:opinionType.value
		}
		opinionrelease(params).then(res=>{
			if(res.code == 200){
				setTimeout(() => {
					uni.showToast({
						title: '反馈成功',
						duration: 1000,
						icon: 'success'
					})
					setTimeout(() => {
						uni.hideToast();
						uni.switchTab({
							url:'/pages/Mypage/index'
						})
					}, 1000)
				}, 0)
			}else if(res.code == 500){
				
			}
		})
	}
	const gobaock = () =>{
		uni.switchTab({
			url:'/pages/Mypage/index'
		})
	}
	const fileList = ref([]);
	
	// 删除图片
	const deletePic = (event) => {
		fileList.value.splice(event.index, 1);
	};
	
	// 新增图片
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList.value.length;
		lists.map((item) => {
			fileList.value.push({
				...item,
				status: 'uploading',
				errorMessage: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList.value[fileListLen];
			fileList.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				errorMessage: '',
				url: result,
				ftype:0
			});
			fileListLen++;
		}
	};
	
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: BASE_URL + '/common/upload', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				formData: {
					user: 'test',
					
				},
				success: (res) => {
					setTimeout(() => {
						let resdata = JSON.parse(res.data)
						resdata.ftype = 0
						commonFileRequests.value.push(resdata)
						resolve(resdata.url)
					}, 1000);
				},
			});
		});
	};
</script>

<style lang="scss" scoped>
	.content {
		width: 750rpx;
		height: 100vh;
		background: #FFFFFF;
		padding: 114rpx 40rpx 0;

		.imagebox {
			width: 100%;
			display: flex;
			align-items: center;

			image {
				width: 18rpx;
				height: 34rpx;
			}

			.title {
				font-family: Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 36rpx;
				margin-left: 18rpx;
				color: #202020;
			}
		}

		.contentbox {
			margin-top: 76rpx;

			.title {
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 30rpx;
				color: #202020;
				margin-bottom: 39rpx;
			}

			.btnbox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				.btnitem {
					margin-top: 24rpx;
					width: 206rpx;
					height: 80rpx;
					background: #F4F5F8;
					border-radius: 8rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 29rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid #F4F5F8;
					color: #050101;
				}

				.btnitemactive {
					background: #E6EEFF;
					border-radius: 8rpx;
					border: 1px solid #2854B7;
					color: #2854B7;
				}
			}
		
		}
		.kong-line{
			width: 100%;
			height: 1px;
			background-color: #f3f3f3;
			margin-top: 53rpx;
		}
		.feedtext{
			margin-top: 52rpx;
			.describe{
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 30rpx;
				color: #252525;
			}
		}
		::v-deep .u-textarea{
			background-color: #F4F5F8 !important;
			margin-top: 29rpx;
			.u-textarea__count{
				background-color: #F4F5F8 !important;
			}
		}
		.btnboxs{
			margin-top: 120rpx;
		}
	}
</style>